import React from "react";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router";
import styles from "./index.module.css"
const Index: React.FC = () => {
  const navigate = useNavigate();
  const username = JSON.parse(localStorage.getItem("username") as string) || "";
  const Outlogin = () => {
    localStorage.removeItem("username");
    navigate("/my");
  };
  return (
    <div className={styles.deng}>
      <NavBar title="系统设置" onClickLeft={() => navigate("/my")} />
      <div>
        {username ? (
          <div>


            <div className={styles.xin}>
              <div className={styles.xinxi}>
                <h3>头像</h3>
                <img src={username.avator} alt="" className={styles.img} />
                <p className={styles.da}>&gt;</p>
              </div>
            </div>

            <div className={styles.xin} onClick={() => navigate("/nicheng")}>
              <div className={styles.xinxi}>
                <h3>昵称</h3>
                <p className={styles.name}>{username.nickname}</p>
                <p className={styles.da}>&gt;</p>
              </div>
            </div>

            <div className={styles.xin}>
              <div className={styles.xinxi}>
                <h3>账号设置</h3>
                <p className={styles.da}>&gt;</p>
              </div>
            </div>
            <div className={styles.xin}>
              <div className={styles.xinxi}>
                <h3>新消息通知</h3>
                <p className={styles.open}>已开启</p>
                <p className={styles.da}>&gt;</p>
              </div>
            </div>
            <div className={styles.xin}>
              <div className={styles.xinxi}>
                <h3>隐私</h3>
                <p className={styles.da}>&gt;</p>
              </div>
            </div>
            <div className={styles.xin}>
              <div className={styles.xinxi}>
                <h3>个人信息收集清单</h3>
                <p className={styles.da}>&gt;</p>
              </div>
            </div>
            <div className={styles.xin}>
              <div className={styles.xinxi}>
                <h3>第三方信息共享清单</h3>
                <p className={styles.da}>&gt;</p>
              </div>
            </div>
            <div className={styles.xin}>
              <div className={styles.xinxi}>
                <h3>当前版本</h3>
                <p className={styles.ban}>V6.4.34</p>
              </div>
            </div>
            <button className={styles.btn} onClick={() => Outlogin()}>
              退出登录
            </button>
          </div>
        ) : (
          <div>
            <div>
              <div className={styles.xin}>
                <div className={styles.xinxi}>
                  <h3>新消息通知</h3>
                  <p className={styles.da}>&gt;</p>
                </div>
                <p className={styles.open}>已开启</p>
              </div>
              <div className={styles.xin}>
                <div className={styles.xinxi}>
                  <h3>隐私</h3>
                  <p className={styles.da}>&gt;</p>
                </div>
              </div>
              <div className={styles.xin}>
                <div className={styles.xinxi}>
                  <h3>个人信息收集清单</h3>
                  <p className={styles.da}>&gt;</p>
                </div>
              </div>
              <div className={styles.xin}>
                <div className={styles.xinxi}>
                  <h3>第三方信息共享清单</h3>
                  <p className={styles.da}>&gt;</p>
                </div>
              </div>
              <div className={styles.xin}>
                <div className={styles.xinxi}>
                  <h3>当前版本</h3>
                  <p className={styles.ban}>V6.4.34</p>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Index;
